<template>
	<el-row :gutter="5" class="main-box">
		<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-box">
			<el-row>
				<el-col :span="24">
					<el-menu
					class="el-menu-demo"
					mode="horizontal">							
						<el-sub-menu index="1">
							<template #title>点击切换行业</template>
							<el-menu-item index="1-1" @click="change(1)">总览</el-menu-item>
							<el-sub-menu index="1-2">
								<template #title>第一产业</template>
								<el-menu-item index="1-2-1" @click="change(2)">农业</el-menu-item>
								<el-menu-item index="1-2-2" @click="change(3)">林业</el-menu-item>
								<el-menu-item index="1-2-3" @click="change(4)">畜牧业</el-menu-item>
								<el-menu-item index="1-2-4" @click="change(5)">水产养殖业</el-menu-item>
							</el-sub-menu>
						
							<el-sub-menu index="1-3">
								<template #title>第二产业</template>
								<el-menu-item index="1-3-1" @click="change(6)">矿业</el-menu-item>
								<el-menu-item index="1-3-2" @click="change(7)">制造业</el-menu-item>
								<el-menu-item index="1-3-3" @click="change(8)">建筑业</el-menu-item>
							</el-sub-menu>
						
							<el-sub-menu index="1-4">
								<template #title>第三产业</template>
								<el-menu-item index="1-4-1" @click="change(9)">金融</el-menu-item>
								<el-menu-item index="1-4-2" @click="change(10)">餐饮业</el-menu-item>
								<el-menu-item index="1-4-3" @click="change(11)">科技</el-menu-item>
								<el-menu-item index="1-4-3" @click="change(12)">批发零售</el-menu-item>
								<el-menu-item index="1-4-4" @click="change(13)">教育</el-menu-item>
							</el-sub-menu>
						</el-sub-menu>						
						<span style="color:rgb(103 95 95);font-size: 0.1875rem;line-height:35px;">
							不建议使用小屏幕视频观看图表
						</span>
					</el-menu>				
				</el-col>
			</el-row>
			<div id="industryLineChart" style="width: 100%; height:95%;" v-if="isShowEchartsLine"></div>
		</el-col>
				
	    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="left-box">			
			<el-row>
				<el-col :span="24">					
					<el-menu
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect">							
						<el-sub-menu index="1">
							<template #title>点击切换行业</template>
							<el-menu-item index="1-1"  @click="changePie(1)">总览</el-menu-item>
							<el-menu-item index="1-2"  @click="changePie(2)">第一产业</el-menu-item>
							<el-menu-item index="1-3"  @click="changePie(3)">第二产业</el-menu-item>
							<el-menu-item index="1-4"  @click="changePie(4)">第三产业</el-menu-item>
						</el-sub-menu>
						<span style="color:rgb(103 95 95);font-size: 0.1875rem;line-height:35px;">
							此数据为微客计划整理，仅供参考
						</span>
					</el-menu>				
				</el-col>
			</el-row>
			<div id="industryPieChart" style="width: 100%; height:95%;" v-if="isShowEchartsPie">				
			</div>
		</el-col>	
	  </el-row>
</template>

<script setup>
	import { ref,onMounted,onUnmounted,reactive} from 'vue'
	import * as echarts from 'echarts'
	import { getOverview,getPieData} from "../../http/industry.js"
	import router from "../../router/index.js";

	const selectIndustry = ref(1)
	const selectIndustryPie=ref(1)
	//消除原图
	let isShowEchartsLine = ref(true)
	let isShowEchartsPie = ref(true)
	const change = (data) =>{
		selectIndustry.value = data
		drawLine()
	}
	const changePie = (data) =>{
		selectIndustryPie.value = data
		drawPie()
	}
	
	let industryLineChart
	let industryPieChart

	const drawLine=()=>{		
		getOverview(selectIndustry.value).then(res=>{			
			industryLineChart.setOption({
			title: {
			    text: '行业趋势变化',
				fontSize:'10',
				top:'2%'
			  },
			  tooltip: {
			    trigger: 'axis'
			  },
			  legend: {
			    data:res.data.name,
				top:'6%'
			  },
			  grid: {
			    left:0,
			    right: '4%',
			    bottom:0,
				bottom:10,
			    containLabel: true
			  },
			  toolbox: {
			    feature: {
			      saveAsImage: {}
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: [1,2,3,4,5,6]
			  },
			  yAxis: {
				scale:true,
			    type: 'value'
			  },
			  series:res.data.value
			},true)
		})
		
	}
	
	const drawPie=()=>{				
		// 绘制图表
		getPieData(selectIndustryPie.value).then(res=>{
			industryPieChart.setOption({
			title: {
				text: '行业数据饼图',
				left: 'center',
				top: '5%',
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '2%',
				left: 'left',
				orient: 'vertical',
			},
			grid: {
			    left:0,
			    right:'4%',
				top:'5%',
				bottom:0,
			    containLabel: true
			},
			series: [
				{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
				borderRadius: 10,
				borderColor: '#fff',
				borderWidth: 2
				 },
				label: {
				show: false,
				position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
					}
				},
				labelLine: {
				    show: false
				},
				data:res.data.value
				}
			]
			})	
		})					
	}
	
	// 扇形统计图
	onMounted(() =>{
		industryLineChart = echarts.init(document.getElementById("industryLineChart"))
		industryPieChart = echarts.init(document.getElementById("industryPieChart"))
		drawLine()
		drawPie()
		window.onresize = function () {//自适应大小
			industryLineChart.resize();	
			industryPieChart.resize();	
		}
	})
	onUnmounted(() =>{
		isShowEchartsLine.value=false
		isShowEchartsPie.value=false
	})
	
</script>

<style scoped="scoped">
	.left-box{
		height: 100%;		
	}
	.right-box{
		height: 100%;		
	}
	.main-box{
		height: 100%;
	}
	:deep(.el-menu){
		height: 2.1875rem;
	}
</style>
